<template>
  <div class="goods">
    <van-swipe class="goods-swipe" :autoplay="3000" style="width: 100%;
    height: 375px;">
      <van-swipe-item v-for="img in goodsImg" :key="img">
        <img :src="img" style="width:100%;height:100%;">
      </van-swipe-item>
    </van-swipe>
    <div @click="goback" style="color: #1989fa;">
    <van-icon name="arrow-left" style="position: absolute;
    top: 0;
    left: 16px;
    height: 48px;
    line-height: 48px;
    font-size: 14px;" />
    </div>
    <van-cell-group>
      <van-cell>
        <div class="goods-title">{{ goods.goodsName }}</div>
        <div class="goods-price" style="color: #f01126;">{{ formatPrice(goods.goodsPrices) }}</div>
      </van-cell>
      <van-cell class="goods-express">
        <van-col span="10">运费：免运费</van-col>
        <van-col span="14">款式：{{goods.seasonTypeName}}-{{goods.sexTypeName}}-{{goods.goodsTypeName}}</van-col>
      </van-cell>
    </van-cell-group>

    <van-cell-group class="goods-cell-group" style="text-align: -webkit-left;">
      <van-cell value="进入店铺" icon="shop-o" is-link @click="goShop(goods.shopId, goods.shopName)">
        <template slot="title">
          <span class="van-cell-text">{{goods.shopName}}</span>
          <van-tag class="goods-tag" type="danger">官方</van-tag>
        </template>
      </van-cell>
      <van-cell title="线下门店" icon="location-o" is-link @click="underLine()" />
    </van-cell-group>

    <!--<van-cell-group class="goods-cell-group" style="text-align: -webkit-left;">-->
      <!--<van-cell title="查看商品详情" is-link @click="sorry" />-->
    <!--</van-cell-group>-->

    <van-goods-action style="z-index: 100;">
      <van-goods-action-icon icon="chat-o" @click="sorry">
        客服
      </van-goods-action-icon>
      <van-goods-action-icon icon="cart-o" @click="goCart">
        购物车
      </van-goods-action-icon>
      <van-goods-action-button type="warning" @click="sorry">
        加入购物车
      </van-goods-action-button>
      <van-goods-action-button type="danger" @click="sorry">
        立即购买
      </van-goods-action-button>
    </van-goods-action>
    <div>
      <van-popup v-model="show" round closeable close-icon="close" position="bottom" :style="{height:'80%'}">
        <buyCard ref="buyCard" :shopId="goods.shopId"></buyCard>
      </van-popup>
    </div>
  </div>
</template>

<script>
import buyCard from './components/buyCard'
import https from '@/common/https.js'
import {IMG_SERVICE_ADDR} from '@/config/configConstant.js' // 常量参数
export default {
  name: 'goodsDetail',
  components: {
    buyCard
  },
  data () {
    return {
      show: false,
      IMG_SERVICE_ADDR: IMG_SERVICE_ADDR,
      goodsId: '',
      goods: {
        goodsName: '',
        goodsPrices: 0,
        shopId: '',
        shopName: '',
        seasonTypeName: '',
        goodsTypeName: '',
        sexTypeName: ''
      },
      goodsImg: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
      ]
    }
  },
  activated () {
    console.log('goodsDetail activated')
  },
  created () {
    console.log('goodsDetail created')
    this.goodsId = this.$route.query.goodsId
    this.getGoodsInfo()
  },
  mounted () {
    console.log('goodsDetail mounted')
  },
  methods: {
    formatPrice () {
      return '¥' + this.goods.goodsPrices
    },
    goCart () {
      this.$router.push({path: '/cart', query: {show: true}})
    },
    sorry () {
      this.show = true
    },
    goback () {
      this.$router.go(-1)
    },
    goShop (shopId, shopName) { // 进入店铺
      this.$router.push({
        path: '/school',
        query: {
          shopId: shopId,
          shopName: shopName
        }
      })
    },
    underLine () {
      this.$refs.buyCard.initBuy()
      this.$toast('努力开发中！！！')
    },
    // 请求后台获取商品详情
    getGoodsInfo () {
      let params = {}
      params.goodsId = this.goodsId
      https.fetchPost('/goods/webs/findGoods', params).then((data) => {
        let goods = data.data
        if (goods !== null) {
          this.goods = goods
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
</style>
